<template>
    <div class="common-layout">
        <el-row>
            <el-container>
                <el-aside width="120px">
                    <Aside />
                </el-aside>
                <el-container style="display: block">
                    <el-row>
                        <el-col :span="leftSpan">
                            <PluginList />
                        </el-col>
                        <el-col :span="middleSpan">
                            <Chat v-model:plugin="showPlugin" />
                        </el-col>
                        <el-col :span="rightSpan">
                            <PluginConfig v-model:plugin="showPlugin" v-model:edit="edit" />
                        </el-col>
                    </el-row>
                </el-container>
            </el-container>
        </el-row>
    </div>
</template>

<script setup>
import { ref, provide, onMounted, watch } from "vue";
import Aside from '@/pages/layout/Aside.vue'
import PluginList from "./components/PluginList.vue";
import PluginDetail from "./components/PluginDetail.vue";
import Chat from "./components/Chat.vue";
import Welcome from "./components/Welcome.vue";
import PluginConfig from "./components/PluginConfig.vue";

import { useRoute } from 'vue-router'

import { getPlugin } from '@/api/plugin'
const route = useRoute()

const props = defineProps({
    query: {
        type: String,
        default: ''
    }
})

const action = ref('chat')
const showPlugin = ref({})
const edit = ref(false)

const leftSpan = ref(6)
const middleSpan = ref(18)
const rightSpan = ref(0)

const setLayout = (layout) => {
    if (layout === 'chat') {
        leftSpan.value = 6
        middleSpan.value = 18
        rightSpan.value = 0

    } else if (layout === 'detail') {
        leftSpan.value = 6
        rightSpan.value = 18

    } else if (layout === 'config') {
        leftSpan.value = 0
        rightSpan.value = 14
    } else if (layout === 'create') {
        leftSpan.value = 6
        middleSpan.value = 0
        rightSpan.value = 18
    } else if (layout === 'edit') {
        leftSpan.value = 6
        middleSpan.value = 0
        rightSpan.value = 18
    } else {
        leftSpan.value = 6
        rightSpan.value = 0
    }
}
const userAction = (plugin, actionName) => {
    showPlugin.value = plugin
    action.value = actionName
    setLayout(actionName)
    if (actionName === 'create') {
        edit.value = true
    }
}
provide('userAction', userAction)

watch(() => route.query, (newVal, oldVal) => {
    if (route.query.id && route.query.config) {
        getPlugin(route.query.id).then((res) => {
            userAction(res, 'config')
        })
    }
})
if (route.query.id && route.query.config) {
    getPlugin(route.query.id).then((res) => {
        userAction(res, 'config')
    })
}

</script>

<style scoped>
/deep/ .el-tabs__header {
    margin: 0;
}
</style>